<template>
    <div class="main-box">
        <el-row>
            <el-col :span="24">
                <div class="drag-box">
                    <ul class="list">
                        <h1 v-if="list.length === 0" type="danger">暂无数据</h1>
                        <div v-if="list.length > 0">
                            <span class="list-item"
                                  @dragenter="dragenter($event, index)"
                                  @dragover="dragover($event, index)"
                                  @dragstart="dragstart(index)"
                                  draggable
                                  v-for="(item, index) in list"
                                  :key="item.label">
                                  <el-tooltip class="item" effect="dark" :content="item.comment" placement="bottom">
                                      <el-tag @close="handleClose(item)" closable="true" :type="item.type" v-popover:popover>
                                          {{item.label}}
                                      </el-tag>
                                  </el-tooltip>
                             </span>
                        </div>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <el-row style="height: 60vh; position: center">
            <div class="block">
                <el-cascader v-model="selectedFlash"
                        placeholder="试试搜索：姓名"
                        :options="options1"
                        filterable style="width: 20vw; margin-top: 20vh" @click="this.selectedFlash = item">
                </el-cascader>
                <el-button icon="el-icon-circle-plus" type="info" class="button-style-1" style="background-color: white" @click="add">添加</el-button>
            </div>
        </el-row>
        <el-row>
            <div style="margin: 20px">
                <el-col :span="5">
                    <el-button icon="el-icon-circle-plus"
                               type="info"
                               v-popover:popover-add
                               style="color: #ad8b3d; background-color: white; border: black solid 1px; border-radius: 20px;">
                        新增基础数据
                    </el-button>
                    <el-button icon="el-icon-circle-plus" type="info"
                               style="color: #ad8b3d; background-color: white; border: black solid 1px; border-radius: 20px;">
                        打开sql文件
                    </el-button>
                </el-col>
                <el-col :span="6">
                    111
                </el-col>
                <el-col :span="5">
                    <el-input placeholder="数据库表名" v-model="tableName" clearable class="input-style">
                        <template slot="prepend">我想在</template>
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="dataQuantity" placeholder="数据量" type="number" clearable>
                        <template slot="prepend">表中生成</template>
                        <template slot="append">条假数据</template>
                    </el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" icon="el-icon-check" class="button-style-1"> 执行</el-button>
                </el-col>
            </div>
        </el-row>
        <!-- 新增数据弹出框 -->
        <el-popover ref="popover-add"
                    placement="top"
                    width="40vw"
                    trigger="click">
            <div style="border: #2c7659 solid 2px; border-radius: 30px; background-color: #d9d6c3">
                <el-form label-width="60px" :model="addForm" style="margin: 20px" :rules="addRules" ref="addForm">
                    <el-form-item label="父布局">
                        <el-cascader v-model="addForm.selectedIds"
                                     prop="selectedIds"
                                     change-on-select="true"
                                     style="width: 30vw"
                                     placeholder="选择父布局"
                                     :options="options2"
                                     filterable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="名称" prop="name" required>
                        <el-input v-model="addForm.name"
                                  style="width: 30vw"
                                  placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="comment" required>
                        <el-input v-model="addForm.comment"
                                  style="width: 30vw"
                                  type="textarea"
                                  :rows="3"
                                  placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="数据" prop="data">
                        <el-input v-model="addForm.data"
                                  style="width: 30vw"
                                  type="textarea"
                                  :rows="3"
                                  placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-button type="primary"
                               plain round
                               size="mini"
                               @click="addFlashData" style="color: brown; background-color: yellow">
                        确认
                    </el-button>
                </el-form>
            </div>
        </el-popover>
    </div>
</template>
<script>
  import flashDataApi from "../../api/operation/flashData";
  import {apiDefaultErrorHandler} from "../../api/base";
  import {success, warning } from "../../utils/message";

  export default {
    name: 'flashdata',
    data() {
      return {
        list: [
          {label: '这个冬天', type: '', comment: '人生自古税务司'},
          {label: '雪', type: 'success', comment: '早起的草儿被鸟吃'},
          {label: '还不下', type: 'warning', comment: '他乡遇故知'},
          {label: '站在路上', type: 'info', comment: '南朝四百八十寺'},
          {label: '眼睛', type: 'danger', comment: '明日复明日'},
          {label: '不眨', type: 'danger', comment: '世人笑我痴'},
        ],
        selectedFlash: null,
        addForm: {
          id: null,
          name: '',
          comment: '',
          data: '',
          selectedIds: null,
          parentId: null
        },
        addRules: {
          selectedIds: [
            {required: true, message: '请选择父布局', trigger: 'change'}
          ],
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ],
          comment: [
            {required: true, message: '请输入备注', trigger: 'blur'}
          ]
        },
        // 联选择数据源
        options1: [],
        options2: [],
        dragIndex: '',
        enterIndex: '',
        tableName: '',
        dataQuantity: null,
      };
    },
    mounted() {
      this.queryAllFlashData();
    },
    methods: {
      /**
       * 查询所有数据
       * @param item
       */
      queryAllFlashData() {
        flashDataApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.options1 = [...data.list]

            this.options2 = [...data.list]
            this.options2.push(
              {
                value: 0,
                label: "一级菜单"
              }
            )
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },

      /**
       * 新增数据
       */
      addFlashData() {
        this.$refs["addForm"].validate((valid) => {
          if (valid) {
            this.addForm.parentId = this.addForm.selectedIds[this.addForm.selectedIds.size - 1]
            flashDataApi.add(this.addForm).then(({data}) => {
              if (this.$http.isResponseSuccess(data)) {
                success("操作成功")
                this.queryAllFlashData();
                this.addForm = []
              } else {
                apiDefaultErrorHandler(data)
              }
            }).catch((ex) => {
              apiDefaultErrorHandler(ex)
            })
          }
        });
      },

      /**
       * 新增选择数据
       */
      add() {
        if (this.selectedFlash == null) {
          warning("你啥也没选,新增个球球")
          return;
        }
        let id = [...this.selectedFlash].reverse()[0]

        flashDataApi.queryById({id: id}).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            success("操作成功")
            let column = {
              label: data.res.name,
              type: data.res.styleType,
              comment: data.res.comment
            }
            this.list.push(column)
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },

      /**
       * 删除标签
       * @param item
       */
      handleClose(item) {
        this.list.splice(this.list.indexOf(item), 1);
      },

      /**
       * 拖拽相关
       * @param index
       */
      dragstart(index) {
        this.dragIndex = index;
      },
      dragenter(e, index) {
        e.preventDefault();
        // 避免源对象触发自身的dragenter事件
        if (this.dragIndex !== index) {
          // 避免重复触发目标对象的dragenter事件
          if (this.enterIndex !== index) {
            const source = this.list[this.dragIndex];
            this.list.splice(this.dragIndex, 1);
            this.list.splice(index, 0, source);
            // 排序变化后目标对象的索引变成源对象的索引
            this.dragIndex = index;
          } else {
            this.enterIndex = index;
          }
        }
      },
      dragover(e, index) {
        e.preventDefault();
      },
    },
  };
</script>

<style lang="scss" scoped>
    .list {
        list-style: none;

        .list-item {
            margin-left: 5px;
            cursor: move;
            width: 100px;
            background: #cde6c7;
            border-radius: 4px;
            color: #FFF;
            margin-bottom: 6px;
            line-height: 50px;
            text-align: center;
        }
    }

    .main-box {
        margin: 3vw;
        border: black solid 3px;
        border-radius: 2vw;
        height: 80vh;
    }

    .drag-box {
        margin: 10px;
        border: #d9d6c3 solid 3px;
        border-radius: 2vw;
    }

    .button-style-1 {
        color: red;
        background-color: #a1a3a6;
        border: black solid 2px;
        border-radius: 20px;
    }

    .input-style {
        color: yellow;
        text-align: center;
        background-color: #8AB4DE;
        caret-color: black;
    }


</style>